{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}It’s Cybersecurity Month — time to level up your privacy{% endblock %}

{% block page_image %}{{ static('img/products/vpn/common/social-share.png') }}{% endblock %}

{% block body_class %}welcome-page14{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('firefox_welcome_page10') }}
  {{ css_bundle('firefox_welcome_page16') }}
{% endblock %}

{% block js %}
    {{ js_bundle("firefox_welcome_page16") }}
{% endblock %}

{% block shoulder_logo %}
  {{ picture(
    url="img/logos/firefox/logo-word-hor.svg",
    sources=[
      {
        "media": "(prefers-color-scheme: light)",
        "srcset": {
          "img/logos/firefox/logo-word-hor.svg": "default",
        }
      },
      {
        "media": "(prefers-color-scheme: dark)",
        "srcset": {
          "img/logos/firefox/logo-word-hor-white.svg": "default",
        }
      }
    ],
    optional_attributes={
      "class": "c-header-logo",
      "alt": "Firefox",
      "width": "120",
      "height": "40",
    }
  ) }}
{% endblock %}

{% block shoulder_cta %}{% endblock %}


{% set coupon_code = 'CYBER20' %}


{% block content_intro %}
  <section class="c-content-main">
    <div class="mzp-l-content mzp-t-content-md">
      {{ picture(
        url="img/firefox/welcome/page16/logo-light.svg",
        sources=[
          {
            "media": "(prefers-color-scheme: light)",
            "srcset": {
              "img/firefox/welcome/page16/logo-light.svg": "default",
            }
          },
          {
            "media": "(prefers-color-scheme: dark)",
            "srcset": {
              "img/firefox/welcome/page16/logo-dark.svg": "default",
            }
          }
        ],
        optional_attributes={
          "alt": "Mozilla VPN",
          "class": "c-main-image",
          "height": "80",
        }
      )}}
      <h1 class="c-main-title">This Cybersecurity Month, take 20% off your first year</h1>
      <p class="c-main-tagline">Keep your location and personal information private and secure. <br/>Get peace of mind with a single click.</p>
      <div class="c-main-cta">
        {{ vpn_product_referral_link(
          referral_id='welcome-page16',
          link_text='Get Mozilla VPN',
          class_name='mzp-t-product mzp-t-xl',
          page_anchor="#pricing",
          optional_parameters={
            'coupon': coupon_code,
          },
          optional_attributes= {
                'data-cta-text' : 'Get Mozilla VPN',
                'data-cta-type' : 'vpn',
                'data-cta-position' : 'primary-cta',
          }
        )}}
      </div>
        <div class="c-coupon-container">
          <h2>Use code at checkout</h2>
          <div class="c-coupon-code-wrapper">
            <strong class="c-coupon-code">{{ coupon_code }}</strong>
            <button type="button" class="c-coupon-copy mzp-c-button" id="code-copy" data-code="{{ coupon_code }}" data-success="Code copied!"><span class="copy-icon"></span><span class="copy-text">Copy code</span></button>
          </div>
          <p class="c-coupon-expires"><small>Offer ends Oct 31, 2023</small></p>
        </div>
    </div>
  </section>
{% endblock %}

{% block content_body %}
<section class="page-body">
  <div class="mzp-l-content mzp-t-content-lg">
    <div class="mzp-l-columns mzp-t-columns-two">

      <div class="mzp-t-picto-center">
        <div class="mzp-c-picto">
          <div class="mzp-c-picto-image">
            {{ picture(
                url="img/firefox/welcome/page16/shield-light.svg",
                sources=[
                  {
                    "media": "(prefers-color-scheme: light)",
                    "srcset": {
                      "img/firefox/welcome/page16/shield-light.svg": "default",
                    }
                  },
                  {
                    "media": "(prefers-color-scheme: dark)",
                    "srcset": {
                      "img/firefox/welcome/page16/shield-dark.svg": "default",
                    }
                  }
                ],
                optional_attributes={
                  "alt": "",
                  "width": "130",
                  "height": "150",
                }
              ) }}
          </div>
          <h3 class="mzp-c-picto-title">Powerful privacy</h3>
          <div class="mzp-c-picto-body">
            <p>Block internet providers and trackers from seeing your browser and app activity.</p>
          </div>
        </div>
      </div>

      <div class="mzp-t-picto-center">
        <div class="mzp-c-picto">
          <div class="mzp-c-picto-image">
            {{ picture(
                url="img/firefox/welcome/page16/devices-light.svg",
                sources=[
                  {
                    "media": "(prefers-color-scheme: light)",
                    "srcset": {
                      "img/firefox/welcome/page16/devices-light.svg": "default",
                    }
                  },
                  {
                    "media": "(prefers-color-scheme: dark)",
                    "srcset": {
                      "img/firefox/welcome/page16/devices-dark.svg": "default",
                    }
                  }
                ],
                optional_attributes={
                  "alt": "",
                  "width": "287",
                  "height": "200",
                }
              ) }}
          </div>
          <h3 class="mzp-c-picto-title">Protect all your devices</h3>
          <div class="mzp-c-picto-body">
            <p>Connect up to five devices on Windows, macOS, iOS, Android and Linux operating systems.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/">
      Why am I seeing this?
    </a>
  </strong>
</p>
{% endblock %}
